<template>
  <div class="city">
    <Navi :title="'选择城市'" :flexd="true" />

    <div class="dang">
      <div class="title">当前城市</div>
      <div class="list">
        <div class="hbox" @click="back()">{{ data.nm }}</div>
      </div>
    </div>

    <div class="dang">
      <div class="title">热门城市</div>
      <div class="list">
        <div
          class="hbox"
          v-for="(item, index) in list"
          :key="index"
          @click="getCheng(item.id, item.nm)"
        >
          {{ item.nm }}
        </div>
      </div>
    </div>

    <div class="cityIndex">
      <van-index-bar>
        <div v-for="(item, index) in cityAll" :key="index">
          <van-index-anchor :index="item.start"></van-index-anchor>
          <van-cell
            :title="ele.nm"
            v-for="(ele, ind) in item.names"
            :key="ind"
            @click="getCheng(ele.id, ele.nm)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "City",
  components: {
    Navi,
  },
  data() {
    return {
      list: [],
      data: {
        id: "20",
        nm: "广州",
      },
      hotCityAry: [],
      cityAll: [],
    };
  },
  created() {
    this.goCity();
    let localData = localStorage.getItem("data");

    if (localData != null) {
      this.data.nm = localData.slice(-5, -3);
    }
  },
  methods: {
    goCity() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/cities.json",
      })
        .then((result) => {
          this.$toast("请选择城市！");
          this.list = result.data.cts.slice(0, 11);

          this.hotCityAry = result.data.hot;
          let citys = result.data.cts;
          let arrSort = citys.sort(function (s, t) {
            let a = s.py.toLowerCase();
            let b = t.py.toLowerCase();
            if (a < b) return -1;
            if (a > b) return 1;
            return 0;
          });
          let cityObj = [];
          let obj = {
            names: [],
          };
          for (let i = 0; i < arrSort.length; i++) {
            if (arrSort.length == 1 && !obj.start) {
              obj.start = arrSort[i]["py"].slice(0, 1).toUpperCase();
              obj.names.push(arrSort[i]);
              cityObj.push(obj);
              break;
            }
            obj.start = arrSort[0]["py"].slice(0, 1).toUpperCase();
            if (arrSort[i]["py"].slice(0, 1).toUpperCase() == obj.start) {
              obj.names.push(arrSort[i]);
              if (i == arrSort.length - 1) {
                cityObj.push(obj);
              }
            } else {
              arrSort.splice(0, i);
              cityObj.push(obj);
              obj = {
                names: [],
              };
              i = -1;
            }
          }
          this.cityAll.push(...cityObj);
        })
        .catch((err) => {});
    },
    getCheng(id, nm) {
      this.$router.push({ name: "Home", params: { id, nm } });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-index-bar {
  background-color: #f0f0f0;
}
/deep/.van-index-anchor--sticky {
  background-color: #f0f0f0;
}
/deep/.van-index-anchor,
/deep/.van-index-bar__index--active {
  color: #333;
}
/deep/.van-index-bar__sidebar {
  color: #999;
}

.city {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
  .dang {
    width: 100%;
    .title {
      width: 100%;
      height: 30px;
      background-color: #ebebeb;
      font-size: 17px;
      color: #666;
      line-height: 30px;
    }
    .list {
      width: 100%;
      background-color: #f5f5f5;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      padding-top: 15px;
      .hbox {
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 17px;
        border: 1px solid #d1d1d1;
        color: #444;
        margin-left: 17px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>